<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        ctx.font = '30px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // --- Define Geometry ---
        // Corner of the table
        const cornerX = 320;
        const cornerY = 180;

        // Block dimensions
        const blockWidth = 80;
        const blockHeight = 80;

        // Pulley properties
        const pulleyRadius = 30;
        // The diagram shows the pulley centered at the corner, which is a common simplification.
        const pulleyX = cornerX;
        const pulleyY = cornerY;

        // Block 2 (on table)
        const block2X = 120;
        const block2Y = cornerY - blockHeight;

        // Block 1 (hanging)
        const block1X = cornerX - blockWidth / 2;
        const block1Y = 280;

        // --- Drawing Functions ---

        // Function to draw the table surface
        function drawTable() {
            ctx.beginPath();
            ctx.moveTo(50, cornerY);
            ctx.lineTo(cornerX, cornerY);
            ctx.lineTo(cornerX, 400);
            ctx.stroke();

            // Draw hatching to indicate solid surface
            ctx.save();
            ctx.lineWidth = 1;
            ctx.strokeStyle = '#333';
            // Hatching for the horizontal surface
            for (let i = 0; i < (cornerX - 50) / 10; i++) {
                ctx.beginPath();
                ctx.moveTo(60 + i * 10, cornerY + 5);
                ctx.lineTo(50 + i * 10, cornerY + 15);
                ctx.stroke();
            }
            // Hatching for the vertical surface
            for (let i = 0; i < (400 - cornerY) / 10; i++) {
                ctx.beginPath();
                ctx.moveTo(cornerX - 5, cornerY + 10 + i * 10);
                ctx.lineTo(cornerX - 15, cornerY + i * 10);
                ctx.stroke();
            }
            ctx.restore();
        }

        // Function to draw a block with a label
        function drawBlock(x, y, width, height, label) {
            ctx.beginPath();
            ctx.rect(x, y, width, height);
            ctx.stroke();
            ctx.fillText(label, x + width / 2, y + height / 2);
        }
        
        // Function to draw the pulley
        function drawPulley() {
            ctx.beginPath();
            ctx.arc(pulleyX, pulleyY, pulleyRadius, 0, 2 * Math.PI);
            ctx.stroke();
            // Draw a line to indicate the axle/spoke
            ctx.beginPath();
            const angle = -Math.PI / 4;
            ctx.moveTo(pulleyX - pulleyRadius * Math.cos(angle), pulleyY - pulleyRadius * Math.sin(angle));
            ctx.lineTo(pulleyX + pulleyRadius * Math.cos(angle), pulleyY + pulleyRadius * Math.sin(angle));
            ctx.stroke();
        }

        // Function to draw the connecting string
        function drawString() {
            ctx.beginPath();
            // Horizontal part from block 2 to pulley
            const stringY = block2Y + blockHeight / 2;
            ctx.moveTo(block2X + blockWidth, stringY);
            ctx.lineTo(pulleyX, stringY);
            
            // Vertical part from pulley to block 1
            const stringStartX = pulleyX;
            // The string is shown coming from the center of the pulley in the simplified diagram.
            ctx.moveTo(stringStartX, pulleyY);
            ctx.lineTo(stringStartX, block1Y);
            ctx.stroke();
        }

        // --- Main Drawing Execution ---
        
        drawTable();
        
        // The string must be drawn before the pulley so the pulley circle is on top.
        drawString();
        
        drawPulley();

        drawBlock(block2X, block2Y, blockWidth, blockHeight, '2');
        drawBlock(block1X, block1Y, blockWidth, blockHeight, '1');

        // Draw the label text
        ctx.font = '30px KaiTi'; // Using a font that supports Chinese characters
        ctx.fillText('题 4 图', 250, 420);

    </script>
</body>
</html>